<template>
  <el-collapse-transition>
    <div v-show="listData.show">
      <ul class="toc-collapse">
        <li v-for="item in listData.items" :key="item.anchor" :data-toc-toggle="!!item.children">
          <span v-if="item.children"
                @click="btnClick(item.children)"
                class="btn-toc-collapse"
                :class="{'sub-toc-close':!item.children.show,'sub-toc-open':item.children.show}">
            <i class="material-icons">chevron_right</i>
          </span>
          <span>
            <a :href="item.anchor"
               :class="{'toc-active': item.active}"
               v-text="item.label"></a>
          </span>
          <blog-toc-ul v-if="item.children" :list-data="item.children"></blog-toc-ul>
        </li>
      </ul>
    </div>
  </el-collapse-transition>
</template>

<script>
import elCollapseTransition from "./el-collapse-transition.vue";
import {defineComponent} from 'vue';

export default defineComponent({
  name: "blog-toc-ul",
  components: {
    'el-collapse-transition': elCollapseTransition
  },
  props: {
    listData: Object,
  },
  methods: {
    btnClick(e) {
      e.show = !e.show;
    },
  },
})
</script>

<style scoped>

</style>